<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/assets/ztree/css/metroStyle/metroStyle.css"/>
    <link rel="stylesheet" href="/assets/iziModal/css/iziModal.css"/>
</head>
<body>
<div class="am-g am-margin-top-lg">
    <div class="am-u-sm-3 am-u-sm-offset-9 am-text-right am-u-end">
        <div class="am-input-group am-input-group-sm">
            <input id="i_search" type="text" class="am-form-field am-input-sm" placeholder="输入组织名称"/>
            <span class="am-input-group-btn">
                            <button class="am-btn  am-btn-primary am-btn-sm am-icon-search" type="button" onclick="searchQuery();"></button>
                        </span>
        </div>
    </div>
</div>
<table width="100%" class="am-table am-table-striped am-table-bordered
            am-table-compact am-text-nowrap am-table-hover" id="table">
    <thead>
    <tr class="am-text-center">
        <td>组织编号</td>
        <td>组织名称</td>
        <td>上级组织</td>
        <td>联系人</td>
        <td>联系电话</td>
        <td>创建时间</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody class="am-text-center"></tbody>
</table>

<@shiro.hasPermission name="dept:add">
<div class="am-g">
    <div class="am-u-sm-12">
        <button class="am-btn am-btn-secondary am-radius am-btn-xs" onclick="toAdd();">新增组织</button>
    </div>
</div>
</@shiro.hasPermission>

<div class="am-g">
    <div class="am-u-sm-12">
        <ui id="deptTree" class="ztree"></ui>
    </div>
</div>

<div id="modal" class="iziModal">
    <div><br/></div>
    <div class="am-g">
        <div class="am-u-sm-12">
            <form class="am-form am-form-horizontal">
                <input type="hidden" id="i_dept" name="deptId"/>
                <div class="am-form-group">
                    <label for="i_name">组织名称</label>
                    <input type="text" id="i_name" placeholder="输入组织名称">
                </div>
                <div class="am-form-group">
                    <label for="i_managerName">组织联系人</label>
                    <input type="text" id="i_managerName" placeholder="输入组织联系人">
                </div>
                <div class="am-form-group">
                    <label for="i_managerPhone">联系人电话</label>
                    <input type="text" id="i_managerPhone" placeholder="输入联系人电话">
                </div>
                <div class="am-form-group">
                    <label for="i_parentId">上级组织</label>
                    <select id="i_parentId">
                        <#list myDepts as dept>
                            <option value="${dept.deptId}">${dept.name}</option>
                        </#list>
                    </select>

                </div>
                <div class="am-form-group am-text-center">
                    <button class="am-btn am-btn-default submit">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/assets/iziModal/js/jquery-2.2.4.js"></script>
<script src="/assets/iziModal/js/iziModal.js"></script>
<script src="/assets/amazeui/js/amazeui.js"></script>
<script src="/assets/amazeui/js/amazeui.datatables.min.js"></script>
<script src="/assets/ztree/js/jquery.ztree.all.js"></script>
<script>

var table;
$(function () {
    loadTable();
    init();
    loadTree();
});

function searchQuery() {
    table.ajax.reload();
    loadTree();
}

function loadTree(){

    $.ajax({
        type: 'post',
        dataType: 'json',
        url: '/sys/dept/deptTree',
        data: {
        },
        success: function (result) {
            if(!result || !result.data || result.data.length==0){
                alert("还没有部门数据");
                return;
            }
            var noteArr = new Array();
            $.each(result.data,function(index,obj){
                var node = {};
                node.id = obj.deptId;
                node.pId = obj.parentId;
                node.name = obj.name;
                node.isParent = true;
                node.open = false;
                noteArr[index] = node;
            });
            var setting = {
                view: {
                    selectedMulti: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };
            $.fn.zTree.init($("#deptTree"), setting, noteArr);
        }
    });
}

function toAdd() {
    $("#i_dept").val('');
    $("#i_name").val('');
    $("#i_managerName").val('');
    $("#i_managerPhone").val('');
    $("#i_parentId").val('');
    $("#modal").iziModal('setTitle','添加组织');
    $("#modal").iziModal('open');
}

function edit(row) {
    if(row.parentId==0){
        alert("最高部门不能修改");
        return;
    }
    $("#i_dept").val(row.deptId);
    $("#i_name").val(row.name);
    $("#i_managerName").val(row.managerName);
    $("#i_managerPhone").val(row.managerPhone);
    $("#i_parentId").val(row.parentId);
    $("#modal").iziModal('setTitle','修改组织');
    $("#modal").iziModal('open');
}

function toDel(deptId) {
    var confirm = window.confirm("确定删除该组织吗?");
    if(confirm){
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: '/sys/dept/toDel',
            data: {
                deptId: deptId
            },
            success: function (result) {
                if(result.code==1){
                    alert(result.errMsg);
                }else{
                    $("#modal").iziModal('close');
                    table.draw(false);
                    loadTree();
                }
            }
        });
    }
}

function init(){
    $("#modal").iziModal({
        title: 'title',
        icon: 'icon-star',
        headerColor: '#00af66',
        width: 600,
        transitionIn: 'bounceInUp',
        transitionOut: 'bounceOutDown',
        focusInput: true,
        overlayClose: false,
        closeOnEscape: false,
        openFullscreen: false
    });
    $("#modal").on('click','.submit',function(event){
        event.preventDefault();
        var deptId = $("#i_dept").val();
        var name = $("#i_name").val();
        var managerName = $("#i_managerName").val();
        var managerPhone = $("#i_managerPhone").val();
        var parentId = $("#i_parentId").val();

        $.ajax({
            type: 'post',
            dataType: 'json',
            url: '/sys/dept/save',
            data: {
                deptId: deptId,
                name: name,
                managerName: managerName,
                managerPhone: managerPhone,
                parentId: parentId
            },
            success: function (result) {
                if(result.code==1){
                    alert(result.errMsg);
                }else{
                    $("#modal").iziModal('close');
                    table.draw(false);
                    loadTree();
                }
            }
        });
    });
}

function loadTable() {
    table = $("#table").DataTable({
        ordering: false,
        bLengthChange: false,
        ordering: false,
        bSort: false,
        serverSide: true,
        searching: false,
        iDisplayLength: 10,
        ajax: {
            url: "/sys/dept/queryList",
            data: function (d) {
                var key = $("#i_search").val();
                if(key){
                    d.key = key;
                }
            }
        },
        columns: [
            {data: "deptId"},
            {data: "name"},
            {data: "parentName"},
            {data: "managerName"},
            {data: "managerPhone"},
            {data: "createTime"},
            {
                data: 'op',
                render: function (data,type,row,meta){
                    if(row.parentId==0){
                        return '';
                    }
                    var btn = "<div>" +
                            <@shiro.hasPermission name="dept:edit">
                            "<button onclick='edit("+JSON.stringify(row)+");' class='am-btn-xs am-btn am-radius am-btn-secondary'>修改</button> " +
                            </@shiro.hasPermission>
                            <@shiro.hasPermission name="dept:delete">
                            "<button onclick='toDel("+row.deptId+");' class='am-btn-xs am-btn am-radius am-btn-warning'>删除</button> "
                            </@shiro.hasPermission>
                            "</div>";

                    return btn;
                }
            }
        ]
    });
}


</script>

</body>
</html>